<template>
    <div class="app">
        <a-layout>
            <a-layout-header theme="light">
                <div class="logo_text">BmyBlog</div>
                <headerComponents :menu="state.menu"></headerComponents>
            </a-layout-header>
            <page :top="84">
                <a-layout>
                    <RouterView v-slot="{ Component, route }">
                        <a-layout-content>
                            <component :is="Component" :key="route.name"/>
                            <!-- <RouterView></RouterView> -->
                        </a-layout-content>
                        <a-layout-sider theme="light" v-if="route.meta.isSider">
                            右侧菜单
                        </a-layout-sider>
                    </RouterView>

                </a-layout>
            </page>

            <a-layout-footer>Footer</a-layout-footer>
        </a-layout>
    </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import { VagueOject } from '@/types/common';
import { RouterLink, RouterView } from 'vue-router';
import headerComponents from "@/components/app/header.vue";
import { HomeOutlined, BarsOutlined, ApartmentOutlined, TagsFilled, SearchOutlined, TeamOutlined } from '@ant-design/icons-vue';

const state: {
    menu: VagueOject[]
} = reactive({
    menu: [
        { text: '首页', icon: HomeOutlined, key: '/home' },
        { text: '文章', icon: BarsOutlined, key: '/article' },
        { text: '分类', icon: ApartmentOutlined, key: '/classification' },
        { text: '标签', icon: TagsFilled, key: '/tags' },
        { text: '搜索', icon: SearchOutlined, key: '/search' },
        { text: '关于', icon: TeamOutlined, key: '/about' },
    ]
})
</script> 
<style lang="less">
.ant-layout-header {
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999;

    .logo_text {
        color: #000;
        font-size: 28px;
        font-weight: 900;
    }

    .ant-menu {
        flex: 1;
        display: flex;
        justify-content: flex-end;
    }
}
</style>
  